<template>
	<div class="Detail" v-for="(GongDanDetail, index) in GongDanDetails" :key="index">
		<div class="Detail-1">
			<div class="Detail-1_1">
				<div class="Detail-1_1-1">
					<img src="../img/勾.png" width="23px" />
				</div>
				<div class="Detail-1_1-2">
					<span>{{GongDanDetail.state}}</span>
				</div>
				<div class="Detail-1_1-3"></div>
				<div class="Detail-1_1-4">
					<el-button link type="primary">打印</el-button>
				</div>
			</div>
			<div class="Detail-1_2">
				<div class="Detail-1_2-1">
					<span>任务信息</span>
				</div>
				<div class="Detail-1_2-2">
					<div class="Detail-rwbh">
						<div>任务编号:</div>
						<div>
							<span>{{GongDanDetail.order_hao}}</span>
						</div>
					</div>
					<div class="Detail-rwly">
						<div>任务来源:</div>
						<div>
							<span>内部创建</span>
						</div>
					</div>
					<div class="Detail-rwcjsj">
						<div>任务创建时间:</div>
						<div>
							<span>{{GongDanDetail.chuang_time}}</span>
						</div>
					</div>
				</div>
				<div class="Detail-1_2-3">
					<div class="Detail-rwqzsj">
						<div>任务起止时间:</div>
						<div>
							<span>{{GongDanDetail.qz_time}}</span>
						</div>
					</div>
					<div class="Detail-rwwcsj">
						<div>任务完成时间:</div>
						<div>
							<span>{{GongDanDetail.wc_time}}</span>
						</div>
					</div>
				</div>
				<div class="Detail-1_2-4">
					<div class="Detail-zxr">
						<div>执行人:</div>
						<div>
							<span><img src="../img/img.png" width="25px" />{{GongDanDetail.executor}}</span>
						</div>
					</div>
				</div>
			</div>
			<div class="Detail-1_3">
				<div class="Detail-1_3-1">
					<div class="Detail-ssfw">
						<div>所属房屋:</div>
						<div>
							<span>{{GongDanDetail.adress}}</span>
						</div>
					</div>
					<div class="Detail-gdlx">
						<div>工单类型:</div>
						<div>
							<span>{{GongDanDetail.order_name}}</span>
						</div>
					</div>
				</div>
				<div class="Detail-1_3-2">
					<div class="Detail-gdnr">
						<div>工单内容:</div>
						<div>
							<span>{{GongDanDetail.ordernr}}</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="Detail-2"
			v-if="GongDanDetail.state === '待审核' || GongDanDetail.state === '待处理' || GongDanDetail.state === '处理中'">
			<div style="margin-left: 850px;padding-top: 15px;">
				<!-- 审核不通过按钮 -->
				<el-button class="shbtg" @click="shbtg=true" v-if="GongDanDetail.state === '待审核'">审核不通过</el-button>
				<!-- 审核通过按钮 -->
				<el-button class="shtg" @click="shtg=true" v-if="GongDanDetail.state === '待审核'">审核通过</el-button>
				<!-- 处理工单按钮 -->
				<el-button class="clgd" @click="clgd=true" v-if="GongDanDetail.state === '待处理'">处理工单</el-button>
				<!-- 完成按钮 -->
				<el-button class="wc" @click="wcgd=true"
					v-if="GongDanDetail.state === '待处理' ||GongDanDetail.state === '处理中'">完成</el-button>
				<!-- 编辑按钮 -->
				<el-button class="bj" @click="bjgd=true"
					v-if="GongDanDetail.state === '待审核'|| GongDanDetail.state === '待处理'">编辑</el-button>
				<!-- 作废按钮 -->
				<el-button class="zf" @click="zf=true" v-if="GongDanDetail.state !== '已作废'">作废</el-button>
			</div>
		</div>
		<el-dialog v-model="shbtg" title="确认作废" width="800">
			<el-input v-model="shbtginputText" style="width: 100%;height: 100px;" :rows="2" type="textarea" />
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="shbtg = false" style="width: 100px;height: 40px;background-color: #F5F5F5;border: none;">
						取消
					</el-button>
					<el-button type="primary" @click="shbtginnerVisible" style="width: 100px;height: 40px;background-color: #00C36D;color: white;">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="shtg" title="确认通过审核" width="800">
			<el-input v-model="shtginputText" style="width: 100%;height: 100px;" :rows="2" type="textarea"
				placeholder="输入原因(选填)" />
			<el-form-item label="工单起止时间:" style="width: 500px;">
				<el-config-provider :locale="locale">
					<el-date-picker :disabled-date="disabledDateFn" v-model="shtgvalue" format="YYYY-MM-DD"
						value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始时间"
						end-placeholder="结束时间" />
				</el-config-provider>
			</el-form-item>
			<el-form-item label="执行人:" style="width: 700px;margin-left: 40px;">
				<el-select v-model="zxrvalue" multiple placeholder="选择执行人(可多选)" style="width: 240px">
					<el-option v-for="item in zxroptions.user_name" :key="item.user_name" :label="item.user_name"
						:value="item.user_name" />
				</el-select>
			</el-form-item>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="shtg = false" style="width: 100px;height: 40px;background-color: #F5F5F5;border: none;">
						取消
					</el-button>
					<el-button type="primary" @click="shtginnerVisible" style="width: 100px;height: 40px;background-color: #00C36D;color: white;">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="clgd" title="处理工单" width="800">
			<el-input v-model="clgdinputText" placeholder="输入处理内容" style="width: 100%;height: 100px;" :rows="2"
				type="textarea" />
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="clgd = false" style="width: 100px;height: 40px;background-color: #F5F5F5;border: none;">
						取消
					</el-button>
					<el-button type="primary" @click="clgdinnerVisible" style="width: 100px;height: 40px;background-color: #00C36D;color: white;">
						处理工单
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="wcgd" title="完成工单" width="800">
			<el-input v-model="wcgdinputText" placeholder="输入完成内容" style="width: 100%;height: 100px;" :rows="2"
				type="textarea" />
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="wcgd = false" style="width: 100px;height: 40px;background-color: #F5F5F5;border: none;">
						取消
					</el-button>
					<el-button type="primary" @click="wcinnerVisible" style="width: 100px;height: 40px;background-color: #00C36D;color: white;">
						处理工单
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="zf" title="作废工单" width="800">
			<span>作废工单后，不再进入工单流程，只能在作废列表可查看</span>
			<el-input v-model="zfinputText" style="width: 100%;height: 100px;" :rows="2" type="textarea" />
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="zf = false" style="width: 100px;height: 40px;background-color: #F5F5F5;border: none;">
						取消
					</el-button>
					<el-button type="primary" @click="zfinnerVisible" style="width: 100px;height: 40px;background-color: #00C36D;color: white;">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
		<el-dialog v-model="bjgd" title="编辑工单" width="800px">
			<el-input v-model="orderwork.ordernr" style="width: 100%;height: 100px;" :rows="2" type="textarea"
				placeholder="输入工单内容" />
			<el-form-item label="工单类型:" style="margin-left: 28px;">
				<el-select disabled v-model="orderwork.order_name" clearable placeholder="请选择工单类型" style="width: 240px">
					<el-option v-for="item in gdlxoptions.order_name" :key="item.order_name" :label="item.order_name" :value="item.order_name" />
				</el-select>
			</el-form-item>
			<el-form-item label="所属房屋:" style="margin-left: 28px;">
				<el-select v-model="orderwork.adress" disabled style="width: 240px"></el-select>
			</el-form-item>
			<el-form-item label="工单起止时间:" style="width: 500px;">
				<el-config-provider :locale="locale">
					<el-date-picker :disabled-date="disabledDateFn" v-model="orderwork.qz_time" format="YYYY-MM-DD"
						value-format="YYYY-MM-DD" type="daterange" range-separator="至" start-placeholder="开始时间"
						end-placeholder="结束时间" />
				</el-config-provider>
			</el-form-item>
			<el-form-item label="执行人:" style="width: 700px;margin-left: 40px;">
				<el-select v-model="orderwork.executor" multiple placeholder="选择执行人(可多选)" style="width: 240px">
					<el-option v-for="item in zxroptions.user_name" :key="item.user_name" :label="item.user_name"
						:value="item.user_name" />
				</el-select>
			</el-form-item>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="bjgd = false" style="width: 100px;height: 40px;background-color: #F5F5F5;border: none;">
						取消
					</el-button>
					<el-button type="primary" @click="bjinnerVisible" style="width: 100px;height: 40px;background-color: #00C36D;color: white;">
						确定
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
	import zhCn from "element-plus/dist/locale/zh-cn";
	import { reactive, ref, computed ,watchEffect } from 'vue'
	import type { TagProps } from 'element-plus'
	import $http from '../router/AxiosApi';
	const disabledDateFn = (time) => {
		if (time.getTime() < Date.now() - 8.64e7) {
			return true;
		} else {
			return false;
		}
	};
	var getTime = new Date().getTime(); //获取到当前时间戳
	var time = new Date(getTime); //创建一个日期对象
	function nowDate(time) {
		var year = time.getFullYear(); // 年
		var month = (time.getMonth() + 1).toString().padStart(2, '0'); // 月
		var date = time.getDate().toString().padStart(2, '0'); // 日
		var hour = time.getHours().toString().padStart(2, '0'); // 时
		var minute = time.getMinutes().toString().padStart(2, '0'); // 分
		var second = time.getSeconds().toString().padStart(2, '0'); // 秒
		return (
			year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
		)
	}
	// 转换为字符串类型
	var formattedTime = nowDate(time);
	console.log("当前时间:", formattedTime); // 输出格式化后的时间字符串

	// 如果需要将其转换为普通字符串类型，直接使用 formattedTime 即可
	var stringTime = formattedTime.toString();
	console.log("转换后的字符串类型:", stringTime);

	const locale = zhCn;
	const shbtg = ref(false)
	const shtg = ref(false)
	const clgd = ref(false)
	const wcgd = ref(false)
	const zf = ref(false)
	const bjgd = ref(false)
	const searchParams = new URLSearchParams(window.location.search);
	const orderHao = searchParams.get("orderHao");
	const GongDanDetails = ref([])
	const XiangQing = () => {
		$http.post(`/GongDanDetail/${orderHao}`).then((res) => {
			GongDanDetails.value = res.data.data
			console.log("数据:", res.data)
		})
	}
	XiangQing()

	const shbtginputText = ref('');
	const shbtginnerVisible = () => {
		if (!shbtginputText.value.trim()) {
			// 使用 value 访问 ref 的值
			alert('文本框不能为空');
			return;
		}
		$http.post("CaoZuoGongDanDetail", {
			order_hao: orderHao,
			state: '已作废',
			shyy: shbtginputText.value,
			zjgx_time: stringTime
		}).then((res) => {
			XiangQing()
			shbtg.value = false
		})
	}
	const zxrvalue = ref([])
	const zxroptions = reactive(
		{ user_name: [] }
	)
	$http.post("ZhiXingRen").then((res) => {
		zxroptions.user_name = res.data.data
	})
	const shtginputText = ref('');
	const shtgvalue = ref([])
	//拼接时间
	const formattedRange = computed(() => {
		if (shtgvalue.value.length === 2) {
			const startDate = shtgvalue.value[0];
			const endDate = shtgvalue.value[1];
			return `${startDate} 至 ${endDate}`;
		} else {
			return '';
		}
	});

	const shtginnerVisible = () => {
		const zxrhuo = zxrvalue.value.map(name => name).join(', ')
		$http.post("CaoZuoGongDanDetail", {
			order_hao: orderHao, state: '待处理',
			shyy: shtginputText.value,
			qz_time: formattedRange.value,
			executor: zxrhuo,
			zjgx_time: stringTime,
			sh_time: stringTime
		}).then((res) => {
			XiangQing()
			shtg.value = false
		})
	}
	const clgdinputText = ref('');
	const clgdinnerVisible = () => {
		$http.post("CaoZuoGongDanDetail",
			{ order_hao: orderHao, state: '处理中', zjgx_time: stringTime }).then((res) => {
				XiangQing()
				clgd.value = false
			})
	}
	const wcgdinputText = ref('')
	const wcinnerVisible = () => {
		$http.post("CaoZuoGongDanDetail",
			{ order_hao: orderHao, state: '已闭单', zjgx_time: stringTime, wc_time: stringTime }).then((res) => {
				XiangQing()
				wcgd.value = false
			})
	}
	const zfinputText = ref('');
	const zfinnerVisible = () => {
		$http.post("CaoZuoGongDanDetail",
			{ order_hao: orderHao, state: '已作废', zjgx_time: stringTime }).then((res) => {
				XiangQing()
				zf.value = false
			})
	}

	const orderwork = reactive({
		order_hao:'',
		ordernr: '',
		order_name: '',
		adress: '',
		qz_time: [],
		executor: []
	})
	function parseDateRange(dateRangeStr) {
		// 假设 dateRangeStr 的格式为 "YYYY-MM-DD HH:mm:ss 至 YYYY-MM-DD HH:mm:ss"  
		const [startDateStr, endDateStr] = dateRangeStr.split(' 至 ');
		return [
			new Date(startDateStr), // 转换为日期对象  
			new Date(endDateStr), // 转换为日期对象  
		];
	}
	const gdlxoptions=reactive(
		{ order_name: [] }
	)
	$http.post("OrderLX").then((res)=>{
		gdlxoptions.order_name = res.data.data
	})
	$http.post(`/GongDanDetail/${orderHao}`, orderwork).then((res) => {
		const fetchedData = res.data;
		orderwork.ordernr = fetchedData.data[0].ordernr
		orderwork.order_name = fetchedData.data[0].order_name
		orderwork.adress = fetchedData.data[0].adress
		// 解析日期范围字符串  
		const qzTimeStr = fetchedData.data[0].qz_time;
		const range = qzTimeStr.split(' 至 ');
		shtgvalue.value = [range[0], range[1]]
		orderwork.qz_time = [range[0], range[1]]; // 设置日期范围 
		let executorStr = fetchedData.data[0].executor;
		if (typeof executorStr === 'string') {
			orderwork.executor = executorStr.split(',').map(name => name.trim()); // 去除可能的空格
			zxrvalue.value = executorStr.split(',').map(name => name.trim())
		} else if (Array.isArray(executorStr)) {
			// 如果executor已经是数组，则直接赋值  
			orderwork.executor = executorStr;
			zxrvalue.value = executorStr
		} else {
			// 处理其他情况，比如executor是undefined或null  
			orderwork.executor = [];
			zxrvalue.value = []
		}
		console.log("编辑", orderwork)
	})
	//拼接时间
	const formattedRange1 = computed(() => {
		if (orderwork.qz_time.length === 2) {
			const startDate = orderwork.qz_time[0];
			const endDate = orderwork.qz_time[1];
			return `${startDate} 至 ${endDate}`;
		} else {
			return '';
		}
	});
	const bjinnerVisible = () => {
		const bjzxr = orderwork.executor.map(name => name).join(', ')
		$http.post("CaoZuoGongDanDetail",{
			order_hao: orderHao,
			qz_time:formattedRange1.value,
			executor:bjzxr,
			ordernr:orderwork.ordernr
		}
		).then((res) => {
			XiangQing()
			bjgd.value=false
		})
	}
</script>

<style scoped>
	.Detail-1 {
		width: 100%;
		background-color: white;
		border-radius: 10px;
		height: 400px;
		margin-left: 10px;
		padding-top: 20px;
	}

	.Detail-1_1 {
		width: 1500px;
		height: 60px;
		background-color: #F5F5F5;
		margin-left: 30px;
		border-radius: 5px;
		display: flex;
	}

	.Detail-1_1-1 {
		width: 25px;
		height: 30px;
		margin-top: 17px;
		margin-left: 10px;
	}

	.Detail-1_1-2 {
		font-weight: bold;
		font-size: 25px;
		margin-top: 8px;
		color: #4B77EC;
	}

	.Detail-1_1-3 {
		width: 80%;
	}

	.Detail-1_1-4 {
		margin-top: 15px;
	}

	.Detail-1_2 {
		width: 1450px;
		margin-left: 30px;
		border-bottom: 1px solid #ccc;
		padding-bottom: 15px;
	}

	.Detail-1_2-1 {
		width: 65px;
		font-weight: bold;
		margin-top: 20px;
	}

	.Detail-1_2-2 {
		display: grid;
		/* 使用Grid布局 */
		grid-template-columns: repeat(3, auto);
		/* 三列，每列宽度自动调整 */
		grid-column-gap: 30px;
		/* 列间距 */
	}

	.Detail-rwbh,
	.Detail-rwly,
	.Detail-rwcjsj {
		display: flex;
		font-size: 14px;
		margin-top: 20px;
	}

	.Detail-1_2-3 {
		display: grid;
		/* 使用Grid布局 */
		grid-template-columns: repeat(2, auto);
		/* 三列，每列宽度自动调整 */
		grid-column-gap: 30px;
		/* 列间距 */
	}

	.Detail-rwqzsj {
		margin-top: 15px;
		display: flex;
		font-size: 14px;
	}

	.Detail-rwwcsj {
		margin-top: 15px;
		display: flex;
		font-size: 14px;
		margin-left: 300px;
	}

	.Detail-1_2-4 {
		display: grid;
		/* 使用Grid布局 */
		grid-template-columns: repeat(1, auto);
		/* 三列，每列宽度自动调整 */
		grid-column-gap: 30px;
		/* 列间距 */
	}

	.Detail-zxr {
		margin-top: 15px;
		display: flex;
		font-size: 14px;
	}

	.Detail-1_2-5 {
		display: grid;
		/* 使用Grid布局 */
		grid-template-columns: repeat(1, auto);
		/* 三列，每列宽度自动调整 */
		grid-column-gap: 30px;
		/* 列间距 */
	}

	.Detail-shr {
		margin-top: 15px;
		display: flex;
		font-size: 14px;
	}

	.Detail-1_2-6 {
		display: grid;
		/* 使用Grid布局 */
		grid-template-columns: repeat(1, auto);
		/* 三列，每列宽度自动调整 */
		grid-column-gap: 30px;
		/* 列间距 */
	}

	.Detail-bq {
		margin-top: 15px;
		display: flex;
		font-size: 14px;
	}

	.Detail-1_3 {
		width: 100%;
		margin-left: 30px;
	}

	.Detail-1_3-1 {
		display: grid;
		/* 使用Grid布局 */
		grid-template-columns: repeat(2, auto);
		/* 三列，每列宽度自动调整 */
		grid-column-gap: 30px;
		/* 列间距 */
	}

	.Detail-ssfw {
		margin-top: 15px;
		display: flex;
		font-size: 14px;
	}

	.Detail-gdlx {
		margin-top: 15px;
		display: flex;
		font-size: 14px;
	}

	.Detail-1_3-2 {
		display: grid;
		/* 使用Grid布局 */
		grid-template-columns: repeat(1, auto);
		/* 三列，每列宽度自动调整 */
		grid-column-gap: 30px;
	}

	.Detail-gdnr {
		margin-top: 15px;
		display: flex;
		font-size: 14px;
	}

	.Detail-2 {
		background-color: white;
		height: 70px;
		width: 100%;
		margin-top: 15px;
		margin-left: 10px;
		border-radius: 10px;
	}

	.shbtg {
		width: 100px;
		height: 40px;
		background-color: #F5F5F5;
	}

	.shtg {
		width: 100px;
		height: 40px;
		background-color: #00C36D;
		color: white;
	}

	.clgd {
		width: 100px;
		height: 40px;
		background-color: #e6a23d;
		color: white;
	}

	.wc {
		width: 100px;
		height: 40px;
		background-color: #00C36D;
		color: white;
	}

	.bj {
		width: 100px;
		height: 40px;
		background-color: #4C76EC;
		color: white;
	}

	.zf {
		width: 100px;
		height: 40px;
		background-color: #F5F5F5;
	}
</style>